import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { colors, spacing, typography } from '../styles/variables';
import { Card, Title, Paragraph, Grid, Button } from '../styles/components';

const ToolsHeader = styled.div`
  text-align: center;
  padding: ${spacing.xl} 0;
  margin-bottom: ${spacing.xl};
`;

const ToolCard = styled(Card)`
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: ${props => props.color || colors.gradientGold};
  }
`;

const ToolIcon = styled.div`
  font-size: 3rem;
  margin-bottom: ${spacing.md};
`;

const ToolTitle = styled.h3`
  color: ${colors.textPrimary};
  font-size: ${typography.fontSize.xl};
  margin-bottom: ${spacing.sm};
`;

const tools = [
  {
    id: 'bazi',
    title: '八字测算',
    description: '根据生辰八字预测命运',
    icon: '八字',
    color: 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)',
    path: '/tools/bazi'
  },
  {
    id: 'tarot',
    title: '塔罗占卜',
    description: '使用塔罗牌探索未来',
    icon: '🃏',
    color: 'linear-gradient(135deg, #ec4899 0%, #db2777 100%)',
    path: '/tools/tarot'
  },
  {
    id: 'dream',
    title: '周公解梦',
    description: '解析梦境背后的含义',
    icon: '🌙',
    color: 'linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%)',
    path: '/tools/dream'
  },
  {
    id: 'name',
    title: '姓名测算',
    description: '分析姓名对命运的影响',
    icon: '✍️',
    color: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
    path: '/tools/name-analysis'
  },
  {
    id: 'face',
    title: '面相分析',
    description: '通过面相了解性格命运',
    icon: '👁️',
    color: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
    path: '/tools/face'
  },
  {
    id: 'hand',
    title: '手相分析',
    description: '解读手掌纹路预测未来',
    icon: '✋',
    color: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
    path: '/tools/palm'
  }
];

function FortuneTools() {
  return (
    <>
      <ToolsHeader>
        <Title>占卜工具库</Title>
        <Paragraph center>选择您感兴趣的占卜工具开始探索</Paragraph>
      </ToolsHeader>

      <Grid columns={3} gap={spacing.lg}>
        {tools.map((tool, index) => (
          <ToolCard 
            key={tool.id} 
            color={tool.color}
            as={motion.div}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
            whileHover={{ y: -5 }}
            whileTap={{ scale: 0.98 }}
          >
            <Link to={tool.path} style={{ textDecoration: 'none' }}>
              <ToolIcon>{tool.icon}</ToolIcon>
              <ToolTitle>{tool.title}</ToolTitle>
              <Paragraph secondary>{tool.description}</Paragraph>
              <Button variant="outline" size="sm" style={{ marginTop: spacing.md }}>
                立即体验
              </Button>
            </Link>
          </ToolCard>
        ))}
      </Grid>
    </>
  );
}

export default FortuneTools;